<template>
  <div class="chart-container" ref="chartRef"></div>
</template>

<script lang="ts">
export default {
  name: "SalesVisitedChart",
};
</script>

<script lang="ts" setup>
import * as echarts from "echarts";
import { ref, watch } from "vue";

const chartRef = ref();

const props = defineProps<{
  data: number[];
  dataAxis: string[];
  salesVisitedTab: string;
}>();

let myEchart: any = null;

watch(
  () => props.data,
  () => {
    // 第一次渲染
    if (!myEchart) {
      myEchart = echarts.init(chartRef.value);
      const option = {
        title: {
          text: "销售趋势",
          textStyle: {
            fontSize: 14,
          },
        },
        xAxis: {
          data: props.dataAxis,
        },
        yAxis: {},
        series: {
          type: "bar",
          data: props.data,
          itemStyle: {
            color: "#3398db",
          },
        },
        grid: {
          left: 0,
          right: 0,
          bottom: 20,
          containLabel: true,
        },
        tooltip: {},
      };
      myEchart.setOption(option);

      return;
    }

    // 第二次或以后渲染
    myEchart.setOption({
      title: {
        text: props.salesVisitedTab === "sales" ? "销售趋势" : "访问趋势",
      },
      xAxis: {
        data: props.dataAxis,
      },
      series: {
        data: props.data,
      },
    });
  }
);
</script>

<style scoped>
.chart-container {
  height: 300px;
}
</style>
